<template>
  <el-dialog
    :visible.sync="value"
    :before-close="onCancel"
  >
    <template slot="title">
      用户查询
    </template>
    <el-form :inline="true" :model="form" ref="refForm">
      <el-form-item label="用户名" prop="username">
        <el-input placeholder="输入用户名" v-model.trim="form.username"></el-input>
      </el-form-item>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        :disabled="hasUsername"
        @click="onSearch"
      >
        搜索
      </el-button>
    </el-form>
    <el-table
      v-if="hasLevelData"
      class="el-table-align-center"
      :data="[levelData]"
      border
      ref="multipleTable"
      v-loading="loading"
      max-height="250"
      element-loading-text="加载中..."
    >
      <el-table-column label="用户名" prop="userName"></el-table-column>
      <el-table-column label="注册时间" prop="createTime">
        <template slot-scope="{row}">
          {{ row.registerDate | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="存款次数" prop="rechargeNum"></el-table-column>
      <el-table-column label="存款总额" prop="rechargeSum"></el-table-column>
      <el-table-column label="提款次数" prop="withdrawNum"></el-table-column>
      <el-table-column label="提款总额" prop="withdrawSum"></el-table-column>
      <el-table-column label="有效投注" prop="bettingSum"></el-table-column>
      <el-table-column label="分层" prop="level" width="120">
        <template slot-scope="{row}">
          <el-select v-model="row.levelId">
            <el-option
              v-for="item in levelList"
              :label="item.name"
              :value="item.levelId"
              :key="item.id"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="锁定">
        <template slot-scope="{row}">
          <el-checkbox v-model="row.status">锁定</el-checkbox>
        </template>
      </el-table-column>
    </el-table>
    <div class="tip" v-if="hasLevelData">温馨提示：调整用户层级必须勾选锁定功能，否则无法成功调整用户层级。</div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onCancel">取 消</el-button>
      <el-button
        v-if="roleCheck('update-user-level')"
        type="primary"
        :disabled="!hasLevelData"
        :loading="loading"
        @click="onToggleLock"
      >
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

// services
import {
  unlockUserLevel,
  getUserLevelList,
  lockUserLevel,
  getUserLevelDetail,
} from '@/services/api/userLevel';
import { getMemberFinance } from '@/services/api/member';

// mixins
import { form, grid } from '@/build';

export default {
  name: 'member-search-dialog',
  props: ['value', 'id'],
  mixins: [form, grid],
  data() {
    return {
      levelData: {},
      levelList: [],
      tableData: {
        list: [],
        total: 0,
      },
      filters: {},
      form: {
        username: null,
      },
    };
  },
  computed: {
    hasUsername() {
      return !this.form.username;
    },
    hasLevelData() {
      return Object.keys(this.levelData).length;
    },
  },
  methods: {
    onCancel() {
      this.$emit('input', false);
    },
    onSearch() {
      this.doAction({ type: 'get', action: 'getGrid' });
      this.doAction({ type: 'get', action: 'getLevelDetail' });
    },
    async onToggleLock() {
      const { levelId, status } = this.levelData;
      const { username = '' } = this.form;
      try {
        if (!username) throw new Error('用户名不为空');
        if (status) {
          if (!levelId) throw new Error('分层为必选');
          const [result, data] = await lockUserLevel({ levelId, username });
          if (!result) throw new Error(data.message);
          this.$notify({
            type: 'success',
            message: '用户层级锁定成功',
          });
        } else {
          const [result, data] = await unlockUserLevel({ username });
          if (!result) throw new Error(data.message);
          this.$notify({
            type: 'success',
            message: '用户层级解锁成功',
          });
        }
        this.onCancel();
        this.$parent.getAll();
      } catch (e) {
        this.$notify({
          type: 'error',
          message: e.message,
        });
      }
    },
  },
  mounted() {
    const currentTime = new Date();
    this.bindGet(getMemberFinance, 'levelData', {
      action: 'getGrid',
      beforeSend: () => ({
        userName: this.form.username,
        stime: 0,
        etime: currentTime.getTime(),
      }),
      format: (data) => {
        const { status } = data;
        return { ...this.levelData, ...data, status: status === 1 };
      },
    });
    this.bindGet(getUserLevelDetail, 'levelData', {
      action: 'getLevelDetail',
      sendingData: 'form',
      format: data => ({ ...this.levelData, ...data }),
    });
    this.bindGet(getUserLevelList, 'levelList', {
      action: 'getLevel',
    });
    this.doAction({ type: 'get', action: 'getLevel' });
  },
};
</script>

<style scoped>
  .tip {
    padding: 20px;
    color: red;
  }
</style>
